<template>
  <div>111111</div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { id: 1, pid: "-1" },
        { id: 11, pid: "1" },
        { id: 12, pid: "1" }
      ],
      treeData: [
        {
          id: 1,
          pid: "-1",
          children: [
            { id: 11, pid: "1", children: [] },
            { id: 12, pid: "1", children: [] }
          ]
        },
         {
          id: 2,
          pid: "0",
          children: [
            { id: 21, pid: "0", children: [] },
            { id: 22, pid: "0", children: [] }
          ]
        }
      ]
    };
  },
  mounted() {
    let dataData = this.listToTree(this.arr);
    console.log(dataData);

     let dataOneData=this.treeToList(this.treeData)
     console.log(dataOneData);

  },
  methods: {
    listToTree(list) {
      var map = {},
        node,
        tree = [],
        i;
      for (i = 0; i < list.length; i++) {
        map[list[i].id] = list[i];
        list[i].children = [];
      }
      for (i = 0; i < list.length; i += 1) {
        node = list[i];
        if (node.pid !== "-1") {
          map[node.pid].children.push(node);
        } else {
          tree.push(node);
        }
      }
      return tree;
    },

    treeToList(tree) {
      var queen = [];
      var out = [];
      queen = queen.concat(tree);
      while (queen.length) {
        var first = queen.shift();
        if (first.children) {
          queen = queen.concat(first.children);
          delete first["children"];
        }

        out.push(first);
      }
      return out;
    }
  }
};
</script>